<!--
 * @Description:产品详情
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-17 9:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-07-05 15:58:42
-->
<template>

	<view class="product-details-container">
		<!-- 商品 -->
		<c-layout @contentScroll="scroll">
			<c-navigation-bar slot="head" title="" isRightIcon :navbarBgColor="navBgc">
				<!--                <template slot="left-icon">-->
				<!--                    <u-image width="72rpx" height="72rpx" shape="circle" src="@/static/images/back.png"></u-image>-->
				<!--                </template>-->
				<view slot="rightIcon" class="slot-icon-box">
					<u-image width="72rpx" height="72rpx" @click="openShare" shape="circle" :src="topImage.send"></u-image>

				</view>
			</c-navigation-bar>
			<view class="product-details-main">
				<!-- 轮播 -->
				<view class="banner-box">
					<u-swiper v-if="info.image"
						:list="info.swiperList.length?info.swiperList:[{'image':$u.file.getMedieUrl(info.image)}]" :autoplay="false"
						@click="preview()" :circular="false"></u-swiper>
				</view>
				<!-- 商品详情信息 -->
				<view class="product-details-info">
					<!-- 第一列商品名数量价格 -->

					<view class="info">
						<view class="price">
							<text class="current-price">${{ publicJS.toFixed(product.price) }}</text>
							<text class="old-price">${{ publicJS.toFixed(product.oldPrice) }}</text>
						</view>
						<view class="">
							<view class="name">
							<u-read-more ref="uReadMore1" toggle show-height="66" text-indent='0' :shadow-style="shadowStyle"
								:close-text="$t('product.ExpansionDetail')" :open-text="$t('product.PutAway')">
								<rich-text :nodes="info.goodsName"></rich-text>
							</u-read-more>
							</view>
							<view class="count" style="display: flex;
								justify-content: space-between; margin: 20px 0;">
								<view class="">
									<text>	{{$t('product.residualInventory')}} {{ skuAttr.availableNum?skuAttr.availableNum:0 }}</text>
								</view>
								<view class="numberBox">
									<u-number-box class="capsule" type="capsule" :min="1" :max='skuAttr.availableNum?skuAttr.availableNum:0' v-model="shangpingshuliang"
										@change="numberBoxChange">
									</u-number-box>
								</view>
								<!-- <text>Monthly sales{{ info.salesVolume }}</text> -->
							</view>

						</view>


						<!-- 	<view class="tags">
							<view :class="`tag-item ${item.id==='2'?'link':''}`" v-for="item in infoTags"
								:key="item.id">
								{{ item.lab }}
								<u-icon v-if="item.id==='2'" name="arrow-right"></u-icon>
							</view>
						</view> -->
						<!-- 商品规格 -->
						<view class="specification">
							<view class="title" style="margin-bottom: 16rpx;">
								{{$t('product.specification') }}
							</view>
							<view class="select-box" id="rollBlock">
								<view class="box">
									{{ skuAttr?skuAttr.skuName:'' }}
								</view>

							</view>
						</view>

					</view>


					<!-- 店铺 -->
					<view class="store">
						<view class="store-card" @click="goShopInfo">
							<view class="store-card">
								<!-- <image style="width: 112rpx; height: 112rpx; border-radius: 50%; margin-right: 20rpx" :src="$u.file.getMedieUrl(storeInfo.shopAvatarUrl)" mode="aspectFill"></image> -->
								<u-avatar size="112" :src='$u.file.getMedieUrl(storeInfo.shopAvatarUrl)' :show-level='true'
									:level-icon='cameraFill' mode="circle"></u-avatar>
								<view class="" style="margin-left: 16rpx;">
									<view style="
								color: #000;
								font-size: 14px;
								font-weight: bold;
								width: 100px;
								display: inline-block;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: normal;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							">
										{{ storeInfo.shopName }}
									</view>
									<view class="shopRate">

										<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="28" :current="storeInfo.mark"
											:disabled="true" style="margin: 0 10rpx;"></u-rate>
										<view class="range">
											{{ `${publicJS.toFixed(storeInfo.mark ) ||0.00} ${$t('orderDetails.points')} `}}
										</view>
									</view>

									<view style="color: #ccc;">
										{{`${$t('product.shopFans')} ${ storeInfo.interestNum || 0} | ${$t('product.shopSalesVolume')} ${ storeInfo.shopSalesVolume || 0}` }}
									</view>

								</view>
							</view>

							<view class=""
								style="height: 58rpx; line-height: 58rpx; padding: 0 10px; background: rgba(252, 61, 92, 1); color: #fff; border-radius: 4px">
								{{ $t('storeManagement.enterShop') }}
							</view>
						</view>

					</view>


					<!-- 评论 -->
					<view class="reviews-box" >
						<view class="box-border">
							<view class="" style="font-size: 35rpx;font-size: 600;">
								{{$t('shop.goodsAverageScore')}}
							</view>
							<view class="">
								<view class="range">
									{{ goodsAverageScore?goodsAverageScore.toFixed(2):'0.00'}}
									<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="38" :current="goodsAverageScore" :disabled="true"
										style="margin: 0 10rpx;"></u-rate>
								</view>										
							</view>						
						</view>
						<view class="title" @click.capture="openReview">
							{{$t('product.comment') }}({{commenTotal}})
							<image style="height: 20rpx;width: 20rpx;" src="@/static/svg/right-arrows.svg">
							</image>

						</view>
						<view class="reviews-main">
							<reviewsCard :data="item" v-for="(item,index) in commentList" :key="item.id" v-show="index<2">
							</reviewsCard>
						</view>
					</view>

					<!-- 商品描述 -->
					<view class="description">
						<view class="title-split">
							<view></view>
							<text class="titleTxet"> {{$t('product.description') }}</text>
							<view></view>
						</view>
						<u-read-more ref="uReadMore" toggle show-height="400" :close-text="$t('product.ExpansionDetail')"
							:open-text="$t('product.PutAway')">
							<rich-text :nodes="content"></rich-text>
						</u-read-more>
					</view>


				</view>
			</view>
			<!-- 底部操作 -->
			<notTabbar slot="footer">
				<view class="footer-handle">
					<view class="circle" @click="customerServiceShow=true">
						<u-icon name="chat"></u-icon>
					</view>



					<u-button type="default" @click="buyQuickly" class="blue">
						{{$t('product.buyQuickly') }}
					</u-button>
				</view>
			</notTabbar>
		</c-layout>
		<!--        弹框-->
		<promptDialog ref="promptDialogs_seckill"></promptDialog>
		<!-- 分享 -->
		<c-share v-model="sharePopShow" :data="shareData"></c-share>


		<!-- 修改地址信息弹窗 -->
		<u-popup safe-area-inset-bottom border-radius="60" class="change-order-address" v-model="changeOrderAddressPopShow"
			mode="bottom">
			<view class="popup-main">
				<view class="header">
					<text>{{$t('product.changeAddress') }}</text>
					<u-icon @click="popStatusChange(false)" name="close"></u-icon>
				</view>
				<!-- 选择地址 -->
				<view class="check-address">
					<view class="address-item" v-for="item in addressList" :key="item.id">
						<view @click="currentCheckChange(item)"
							:class="`check-icon ${currentAddress.id === item.id?'is-checked':''}`">
						</view>
						<view class="check-text" @click="currentCheckChange(item)">
							<view class="user-name">
								{{ item.userName }}
							</view>
							<view class="address">
								{{ item.address }}
							</view>
						</view>
					</view>
				</view>
				<button type="default" @click="changeAddress">{{$t('system.affirm') }}</button>
			</view>
		</u-popup>

		<!--        评论列表-->
		<u-popup v-model="commenPopup" mode="bottom" border-radius="34" class="reviews-pop" closeable>
			<view class="" style="height: 800rpx;">
				<view class="tabs">
					<view class="tabs_aside" :class="active === 2 ? 'active' : ''" @click="active = 2">
						{{ $t('storeManagement.all') }}
					</view>
					<view class="tabs_aside" :class="active===0?'active':''" @click="active=0">
						{{$t('product.goodReputation') }}
					</view>
					<view class="tabs_aside" :class="active===1?'active':''" @click="active=1">
						{{$t('product.negativeComment') }}

					</view>
				</view>
				<scroll-view :scroll-top="0" scroll-y="true" style="height: calc(100% - 40px); width: 100%">
					<view class="reviews-main reviews-main-popup" v-if="active===2">
						<reviewsCard :data="item" v-for="(item,index) in commentList" :key="item.id"></reviewsCard>
					</view>
					<view class="reviews-main reviews-main-popup" v-if="active===0">
						<reviewsCard :data="item" v-for="(item,index) in commentList_1" :key="item.id"></reviewsCard>
					</view>
					<view class="reviews-main reviews-main-popup" v-if="active===1">
						<reviewsCard :data="item" v-for="(item,index) in commentList_2" :key="item.id"></reviewsCard>
					</view>
				</scroll-view>
			</view>

		</u-popup>
		<!--        弹框-->
		<promptDialog ref="promptDialogs_cs"></promptDialog>

		<!-- 客服弹窗 -->
		<u-popup v-model="customerServiceShow" mode="bottom" border-radius="14" height="520rpx">
			<view class="customerServiceBox">
				<view class="" style="width: 100%;height: 40rpx;text-align: center;">
					{{$t('user.customerService')}}
				</view>
				<view class=""
					style="width: 100%;height: 80rpx;text-align: center;margin: 40rpx 0;font-size: 12px;color: #ccc;">
					<p> {{$t('user.customerServiceTips1')}}</p>
					<p> {{$t('user.customerServiceTips2')}}</p>
				</view>
				<view class="" style="display: flex; justify-content: space-around;">
					<view class="" @click="publicJS.noOpen(()=>toCustomer(urlList[0]))">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs2.png')" />
						</view>
						<view class="">
							Support
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[1])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs3.png')" />
						</view>
						<view class="">
							Telegram
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[2])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs1.png')" />
						</view>
						<view class="">
							WhatsApp
						</view>
					</view>

				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2
	export default {
		data() {
			return {
				goodsAverageScore:null,//商品平均分
				shangpingshuliang: 1,
				isStatr: 0,
				cameraFill: require('static/images/icon-avator-home.png'),
				content: '',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				// 当前选中地址id
				currentAddress: {},
				defaulAddress: {},
				// 商品信息
				info: {
					shangpingming: 'Roller Rabbit',
					mingxiamiaoshu: 'Vado Odelle Dress',

					shangpingjiage: 1479,
					yuanjia: 3699,
					xiaoshoue: '300+',
					miaoshu: 'A roomy backpack from the specialists in everyday bags at Herschel Supply Co., featuring resilient canvas and a light-blue patina that feels just right for summer.',
					'发货信息': 'Ship to Birmingham College of Art 3 Margaret St, Birmingham B3',
					'参数': 'Brand / Applicable age',
					color: [{
							val: '粉色',
							color: 'pink',
							id: 'pink'
						},
						{
							val: '白色',
							color: 'while',
							id: 'while'
						},
						{
							val: '绿色',
							color: 'green',
							id: 'green'
						},
						{
							val: '黑色',
							color: 'black',
							id: 'black'
						},
					],
					size: [{
							val: 'S',
							id: 'S'
						},
						{
							val: 'M',
							id: 'M'
						},
						{
							val: 'L',
							id: 'L'
						},
						{
							val: 'XL',
							id: 'XL'
						},
						{
							val: 'XXL',
							id: 'XXL'
						},
					],
					cColor: '',
					cSize: '',
					cCoupon: "",
					cNumber: 1,

				},
				// 优惠券列表
				discountCouponList: [{
						amount: '50',
						des: 'Special coupon for shoes',
						id: 1
					},
					{
						amount: '100',
						des: 'Special coupon for shoes',
						id: 2
					},
				],
				// 标签信息
				infoTags: [{
						lab: '30 for every 300 sto',
						id: '0'
					},
					{
						lab: 'Gold coin',
						id: '1'
					},
					{
						lab: 'Collect coupons ',
						id: '2'
					},
				],
				// 店铺信息
				storeInfo: {},
				// 评论列表
				commentList: [],
				commentList_1: [],
				commentList_2: [],
				active: 2,
				commenTotal: 0,
				commenPopup: false,
				goodList: [{
						img: '../../static/images/home/good-1.png',
						name: 'Jack & Jones',
						price: '764',
						unit: '$'
					},
					{
						img: '../../static/images/home/good-2.png',
						name: 'Mango Carlo',
						price: '1269',
						unit: '$'
					},
					{
						img: '../../static/images/home/good-2.png',
						name: 'Pepe Jeans',
						price: '1269',
						unit: '$'
					},
				],
				// 好友列表
				friendList: [],
				// 分段器
				subsectionList: [{
						name: 'All'
					},
					{
						name: 'Well reviews'
					},
					{
						name: 'Negative'
					}
				],
				imageList: [
					require('@/static/images/home/good-1.png'),
					require('static/images/home/good-2.png'),
					require('static/images/home/girl.png'),
					require('static/images/home/good-2.png'),
				],
				// 导航栏背景颜色
				navBgc: 'transparent',
				// 分享弹窗状态
				sharePopShow: false,
				// 选择规格
				checkSpecificationPop: false,
				// 评论
				reviewsPop: false,
				followUrlData: {},
				topImage: {
					send: require('@/static/images/send.png'),
					car: require('@/static/images/car.png')
				},
				skuAttributes: [],
				skuAttr: '',
				group: {},
				showPrice: '',
				goodsSku: '',
				goosTotalNum: '',
				product: {
					price: 0,
					originalPrice: 0
				},
				changeOrderAddressPopShow: false,
				addressList: [],
				paging: {
					size: 20,
					current: 1
				},
				shareData: {},
				// 客服弹窗
				customerServiceShow: false,
				urlList: ['https://www.baidu.com/', 'www.baidu.com', 'www.baidu.com']
			};
		},
		onLoad(val) {
			this.isStatr = uni.getStorageSync('seckillIsStart')
			this.followUrlData = JSON.parse(decodeURIComponent(val.data));
			this.getFriendsAjax()
			this.getProductDetails({
				shopIds:this.followUrlData.shopIds,
				activityId:this.followUrlData.activityId,
				skuId:this.followUrlData.skuId,
			})


			this.$u.post('/app/h2-sys-config/getConfigServiceAddress').then((res) => {
				this.urlList = res.data
			});
		},
		methods: {
			back() {
				uni.navigateBack(1)
			},
			// 步进器值修改
			numberBoxChange(val) {

			},
			preview(index) {
				// 调用uni.previewImage()方法,传递index
				uni.previewImage({
					current: index,
					// 返回所有图片的url地址数组
					urls: this.info.swiperList.length ? this.info.swiperList.map((item) => item.image) : [this.$u.file
						.getMedieUrl(this.info.image)
					]
				});
			},
			// 跳转
			push(url) {
				uni.navigateTo({
					url
				})
			},
			//浏览店铺
			goShopInfo() {
				this.$u.route('/pages/shop/index', {
					shopId: this.storeInfo.id,
				})
				this.$u.post(`/app/shop/browseShop/${this.storeInfo.id}`).then((res) => {

				});
			},
			valChange() {},
			// 优惠券选择
			radioGroupChange() {},
			radioChange() {},
			// 现在购买
			buyQuickly() {
				if (!this.isStatr) {
					this.$u.toast(this.$t('product.isNotStart'));
					return
				}
				this.submitOrder()
			},
			// 获取好友
			getFriendsAjax() {

			},
			//滚动到某个目标节点位置
			roll() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#rollBlock').boundingClientRect(data => {
					// console.log(data.top,uni.pageScrollTo)
					// uni.pageScrollTo({
					//     duration: 100,//过渡时间
					//     scrollTop: data.top,//到达目标class的top值
					// })
				}).exec();


			},
			// 判断参数
			submitOrder() {
				let that = this
				this.$u.api.verifyIsSetPwdAjax(0).then(res => {
					if (!res) {
						this.$refs.promptDialogs_seckill.show({
							confirm: (close) => {
								close()
								this.$u.route('pages/modify/modify?type=1&set=0')
							},
							icon: 'errorTip',
							btnColor: '#2934d0', //按钮颜色
							btnTextType: 'Get a certificate', // 按钮文字
							des: this.$t('product.PleaseSet'),
							btnText: this.$t('product.GoToAdd'),
						})


						return false
					} else {
						that.successPass()
					}
				})
			},
			//通过判断验证
			successPass() {
				// //直接冲地址页过来直接购买从缓存取数据
				// if (JSON.stringify(this.vuex_address_info) != "{}") {
				// 	//定义传参对象
				// 	let obj = {}
				// 	this.vuex_address_info.consigUser = this.vuex_address_info.receiveUserName
				// 	this.vuex_address_info.addressId = this.vuex_address_info.addressId
				// 	obj = this.vuex_address_info
				// 	this.submits(obj)
				// } else {
				//址获取地址
				this.$u.post('/app/user/address/page', {
					pageSize: 10000,
					pageNum: 1
				}).then(res => {
					//没有地址则去新建地址
					if (res.data.records.length <= 0) {
						this.$refs.promptDialogs_cs.show({
							confirm: (close) => {
								close()
								this.$u.route('/pages/addAddress/addAddress')
							},
							icon: 'errorTip',
							btnColor: '#2934d0', //按钮颜色
							btnTextType: 'Get a certificate', // 按钮文字
							des: this.$t('product.addressError'),
							btnText: this.$t('product.GoToAdd'),
						})

					} else {
						//有地址则选取地址
						this.addressList = res.data.records
						this.defaulAddress = this.addressList.find(e => e.defaultAddress) || this.addressList[
							0]
						this.popStatusChange(true)
					}
				})
				// }
			},

			//提交订单
			submits(obj) {
				obj.skuId = this.goodsSku
				obj.seckillGoodsId = this.followUrlData.id
				obj.taskId = this.followUrlData.infoId
				obj.num = this.shangpingshuliang
				let array = []
			
				this.info.shopName = 	this.storeInfo.shopName
				this.info.price = this.product.price
				this.info.originalPrice = this.product.originalPrice
				array.push(this.info)
				this.$u.vuex('vuex_shoping_cart', array)
				// 生成订单
				this.$u.post('/app/seckillActivity/addSeckillOrder', obj).then(res => {
					this.$u.vuex('vuex_shop_order_info', res.data)
					this.$u.vuex('vuex_shoping_cartList', res.data)
					this.$nextTick(() => {
						this.$u.route('/pages/orderDetails/orderDetails', {
							type: 0,
							orderId: res.data.orderInfo.id,
							moneys: res.data.orderInfo.moneys,
							num: this.shangpingshuliang,
							totalPostage: res.data.orderInfo.totalPostage,
						})
					})


				})
			},
			scroll({
				detail: e
			}) {
				if (e.scrollTop > 255 + statusBarHeight) {
					this.navBgc = '#fff'
					this.topImage.send = require('@/static/images/send1.png')
					this.topImage.car = require('@/static/images/car1.png')
				} else {
					this.navBgc = 'transparent'
					this.topImage.send = require('@/static/images/send.png')
					this.topImage.car = require('@/static/images/car.png')
				}
			},
			//展开评论列表
			openReview() {
				// uni.navigateTo({
				//     url: '/pages/commentDetails/commentDetails',
				//     "animationType": "slide-in-bottom",
				//     "animationDuration": 300
				// })
				this.commenPopup = true
			},
			// 获取评论
			getProducReview(paging) {
				console.log(this.info)
				this.paging.goodsId = this.info.id
				this.paging.size = 9999
				this.$u.post('/app/shopOrderComment/page', paging).then(res => {
					this.goodsAverageScore=Number( res.data.countId)
					this.commentList = res.data.records
					this.commentList.forEach(i => {
						if (i.rating == 1) {
							this.commentList_1.push(i)
						} else {
							this.commentList_2.push(i)
						}
					})
					this.commenTotal = res.data.total
				})
			},
			//获取产品详情
			getProductDetails(val) {
				this.$u.post('/app/seckillActivity/info', val).then(res => {
					//商品信息
					let swiperList = res.data.goodsInfo.images ? res.data.goodsInfo.images.split(',') : []
					let newarr = []
					swiperList.forEach(i => {
						newarr.push({ 'image': this.$u.file.getMedieUrl(i) })
					})
					this.content = res.data.goodsInfo.goodsDesc
					this.$nextTick(() => {
						this.$refs.uReadMore1.init();
						this.$refs.uReadMore.init();
					})
					this.info = { ...res.data.goodsInfo, collectStatus: res.data.collectStatus, swiperList: newarr, }
					this.product.price = res.data.seckillGoods.seckillPrice
					this.product.oldPrice = res.data.seckillGoods.price
					this.skuAttr = res.data.goodsSku
					this.product.originalPrice = this.info.originalPrice
					this.goodsSku = res.data.goodsSku.id
					this.getStoreInfo(this.info.shopId)
					this.getProducReview(this.paging)
				})
			},
			//获取店铺信息
			getStoreInfo(id) {
				// this.storeInfo
				this.$u.get('/app/shop/get/' + id).then(r => {
					this.storeInfo = r.data
					this.$u.get('/app/shop-level/' + r.data.shopLevelId).then((res) => {
							this.cameraFill = this.$u.file.getMedieUrl(res.data.icon)
						});
				
				})
			},



			// 弹出层状态修改

			popStatusChange(status) {
				this.changeOrderAddressPopShow = status
				status && (this.currentAddress = this.defaulAddress)
			},
			// 确认
			changeAddress() {
				this.changeOrderAddressPopShow = false
				this.defaulAddress = this.currentAddress
				let obj = {}
				obj = this.defaulAddress
				obj.consigUser = this.defaulAddress.userName
				obj.addressId = this.defaulAddress.id
				this.$u.vuex('vuex_address_info', obj)
				this.submits(obj)

			},
			// 修改选中
			currentCheckChange(item) {
				if (this.currentAddress.id !== item.id) {
					this.currentAddress = item
				} else {
					return
				}
			},
			// 打开分享
			openShare() {
				this.sharePopShow = true
				const data = encodeURIComponent(JSON.stringify(this.followUrlData))
				this.shareData = {
					url: `/pages/seckillProductDetails/seckillProductDetails?data=${data}`
				}
				console.log(this.shareData);
			},
			// 客服外链
			toCustomer(url) {
			// #ifdef H5
			window.location.href =url;
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.openURL(url)
			
			// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	$filleted-corner-width: 48rpx;
	$theme-color: #1b1c28;

	@mixin flexJusSb {
		display: flex;
		justify-content: space-between;

	}

	@mixin line-center {
		display: flex;
		align-items: center;
	}

	.product-details-container {
		font-family: PingFang SC;
	}

	.tag-item {
		font-size: 20rpx;
		background-color: #F6F9FA;
		text-align: center;
		line-height: 40rpx;
		border-radius: 20rpx;

		&.link {
			color: #2934D0;
		}
	}
	/deep/ .u-avatar__level {
			.u-icon__img {
				width: 26px !important;
			}
		}
	.title-split {
		margin: 48rpx 0 28rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.titleTxet {
			font-weight: bold;
			font-size: 14px !important;
			padding: 0 12px;
			font-family: PingFangSC-Heavy;
			color: #000 !important;
		}

		view {
			width: 112rpx;
			height: 4rpx;
			border-radius: 3rpx;

			&:first-of-type {
				background: linear-gradient(270deg, rgba(23, 23, 23, 0.2) 1.25%, rgba(23, 23, 23, 0) 101.25%);
			}

			&:last-of-type {
				background: linear-gradient(270deg, rgba(23, 23, 23, 0.2) 1.25%, rgba(23, 23, 23, 0) 101.25%);
			}
		}
	}

	/deep/ .nav-search {
		.switch-svg {
			width: fit-content !important;
		}
	}

	/deep/ .c-navigation-bar {
		z-index: 999;
	}

	.slot-icon-box {
		display: flex;
		height: 100%;
		align-items: center;
		margin-right: 45rpx;

		.u-image {
			&:nth-child(1) {
				margin-right: 20rpx;
			}
		}
	}

	.footer-handle {
		padding: 0rpx 42rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.circle {
			border-radius: 50%;
			width: 80rpx;
			height: 80rpx;
			background-color: #22287C;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			font-size: 36rpx;
		}

		>button {
			font-weight: normal;
			height: 86rpx;
			line-height: 86rpx;
			width: 217rpx;

			&.add:not(.button-hover) {
				background-color: #323755;
				color: #DEDEDE;
			}

			margin: 0;
			padding: 0;
			font-size: 32rpx;
		}
	}

	.product-details-container {

		// display: flex;
		// flex-direction: column;
		height: 100vh;
		position: relative;

		/deep/ .layout-head {
			position: fixed !important;
			top: 0;
			z-index: 100;
			width: 100%;
		}


		.product-details-header {
			width: 100vw;
			position: fixed;
			top: 0;
			z-index: 100;
			// padding-bottom: 20rpx;

			// background-color: pink;
			.header-handle {
				padding: 0 45rpx;
				@include flexJusSb;
				margin-top: 36rpx;
			}
		}

		.product-details-main {
			// flex: auto;
			// height: 0;
			position: relative;

			.banner-box {
				/deep/ .u-swiper-wrap {
					uni-swiper {
						height: 646rpx !important;
					}

					.u-swiper-indicator {
						bottom: 46rpx !important;

						.u-indicator-item-round {
							background-color: #fff;
							margin: 0 14rpx;

							&.u-indicator-item-round-active {
								position: relative;
								width: 14rpx;

								&::after {
									position: absolute;
									content: '';
									padding: 8rpx;
									width: 100%;
									height: 100%;
									border: 2rpx solid #fff;
									border-radius: 50%;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
								}
							}
						}
					}
				}
			}

			.product-details-info {
				background-color: #fff;
				border-radius: 60rpx;
				padding: 56rpx 50rpx 200rpx;
				min-height: 824rpx;
				position: relative;
				top: 60rpx;

				>.info {
					padding-bottom: 38rpx;
					border-bottom: 2rpx solid #F2F3F5;

					>view {
							justify-content: space-between;

							>.name {
								/deep/ .u-content{
									font-size: 36rpx;
									font-weight: 500;
									margin-bottom: 10rpx;
								}

								>text {
									color: #666666;
									font-size: 22rpx;
								}
							}

							.count {

								.numberBox {
									margin-bottom: 12rpx;
									display: flex;
									justify-content: flex-end;
								}

								>text {
									font-size: 22rpx;
								}
							}

						&.price {
							.old-price {
								text-decoration: line-through;
							}

							.current-price {
								color: rgba(252, 61, 92, 1);
								font-family: PingFangSC-Heavy;
								font-weight: bold;
								font-size: 50rpx;
							}

							.original-cost {
								color: #91909A;
								font-size: 26rpx;
								font-weight: 400;
								text-decoration: line-through;
								padding-left: 12rpx;
							}

							.discount {
								color: #F26163;
								font-size: 28rpx;
								padding-left: 4rpx;
							}
						}

						&.tags {
							display: flex;
							justify-content: space-between;
							margin-top: 28rpx;

							>view {
								width: calc((100% - 20rpx) / 3);
							}
						}
					}
				}

				>view {
					margin-bottom: 40rpx;
					padding-bottom: 40rpx;

					.title {
						@include flexJusSb;
						color: #000;
						font-size: 32rpx;
						line-height: 48rpx;
					}

					.des-box {
						color: #666666;
						font-size: 22rpx;
					}
				}

				.description {
					text {
						font-size: 22rpx;
						color: #666;
						line-height: 34rpx;
					}
				}

				.specification,
				.parameter {
					border-bottom: 2rpx solid #DDDDDD;

					.select-size-color {
						@include flexJusSb;

						>view {
							@include flexJusSb;
						}
					}
				}


				// 评论列表
				.reviews-box {
					border-bottom: 2rpx solid #F2F3F5;
					border-radius: 8rpx;
					padding: 32rpx;
					background: rgba(242, 242, 242, 1);
					border-bottom: 2rpx solid #F2F3F5;

					.title {
						margin: 0 0 40rpx 0;

						text {

							// white-space: nowrap;
							span {
								white-space: nowrap;
							}
						}
					}

					.reviews-main {
						.nav-search {
							/deep/ .switch-svg {
								width: 82rpx !important;
							}
						}

						.reviews-card {
							margin-top: 32rpx;

							&:not(:last-child) {
								/deep/ .main {
									border-bottom: 2rpx solid #F2F3F5;
								}
							}
						}
					}
				}

				/deep/ .scroll-view-box {
					.title {
						h2 {
							font-size: 32rpx;
						}
					}

					.uni-scroll-view-content {
						display: flex;

						.scroll-item {
							margin-right: 40rpx;

							.name {
								color: #1B1D29;
								margin-top: 10rpx;
							}

							.price {
								color: #91909A;
							}
						}
					}
				}


				.store {
					border-bottom: 2rpx solid #f2f3f5;
					border-radius: 8rpx;
					padding: 32rpx;
					background: rgba(242, 242, 242, 1);
					border-bottom: 2rpx solid #f2f3f5;
					margin: 16rpx 0;

					.store-card {
						display: flex;
						justify-content: space-between;
						align-items: center;

						view {
							text {
								font-size: 28rpx;
								color: #1b1d29;
							}
						}
					}
				}

				.shopRate {
					display: flex;
					align-items: center;
					margin: 10rpx 0;

					.shopRateName {
						color: rgba(95, 100, 140, 1);
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 18rpx;
						width: 80rpx;
						height: 38rpx;
						border-radius: 4rpx;
						border: 1rpx solid rgba(189, 188, 199, 1);
						box-sizing: border-box;
						background: rgba(252, 250, 254, 1);
						line-height: 34rpx;
						text-align: center;
					}

					.range {
						color: rgba(95, 100, 140, 1);
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 20rpx;
					}
				}

				>.guarantee {
					.guarantee-box {
						display: flex;

						.tag-item {
							padding: 0 16rpx;
						}
					}
				}
			}
		}

		// 分享弹出层呢
		.share-pop {
			.share-main {
				padding: 68rpx 46rpx 0;
				max-height: 70vh;

				.othen-way {
					display: flex;

					>* {
						&:not(:first-child) {
							margin-left: 40rpx;
						}
					}
				}

				.friends {
					padding-top: 30rpx;

					.user-list-item {
						margin-top: 30rpx;
					}

					.slot-btn {
						margin: 0;
						// margin-right: 14rpx;
						width: 158rpx;
						height: 48rpx;

						&:not(.u-primary-plain-hover) {
							background-color: #fff !important;
							color: #2934D0 !important;
							border-color: #2934D0 !important;
						}

						&.u-primary-plain-hover {
							background-color: #2934D0 !important;
						}
					}
				}
			}
		}

		.select-box {
			margin: 32rpx 0;

			.box {
				display: flex;
				flex-wrap: wrap;

				.type {
					padding: 10rpx 20rpx;
					border: 2rpx solid #DDDDDD;
					margin: 10rpx 5rpx;
					border-radius: 40rpx;
					font-size: 22rpx;
				}

				.active {
					color: #2934d0;
					border: 2rpx solid #2934d0;
				}
			}
		}

		// 选择规格弹出层
		.check-specification-pop {
			.check-specification-main {
				padding: 40rpx;

				>view {
					>h2 {
						font-size: 32rpx;
						color: #000;
						font-weight: 500
					}
				}


				.select-size {
					margin-top: 32rpx;

					>view {
						display: flex;
						margin-top: 20rpx;
						padding-bottom: 36rpx;
						border-bottom: 2rpx solid #F2F3F5;

						.select-size-item {
							width: 80rpx;
							height: 80rpx;
							border: 2rpx solid #DDDDDD;
							text-align: center;
							line-height: 80rpx;
							border-radius: 50%;
							color: #888888;
							transition: .2s;

							&:not(:first-child) {
								margin-left: 30rpx;
							}

							&.is-checked {
								background-color: #2934D0;
								border-color: #2934D0;
								color: #fff;
							}
						}
					}
				}

				.select-discount-coupon {
					padding: 38rpx 0 32rpx;
					border-bottom: 2rpx solid #F2F3F5;

					.u-radio-group {
						/deep/ .u-radio {
							width: 100% !important;
							display: flex;
							flex-direction: row-reverse;
							justify-content: space-between;

							&:not(:first-child) {
								margin-top: 20rpx;
							}

							.u-radio__label {
								display: flex;
								align-items: center;

								.image-for-size {
									margin-right: 10rpx;
								}
							}

							.u-radio__icon-wrap {
								.u-icon__icon {
									&::before {
										content: "\e63a";
									}
								}
							}
						}
					}
				}

				.check-number {
					display: flex;
					margin-top: 32rpx;
					justify-content: end;
				}

				uni-button {
					margin-top: 38rpx;
					width: 670rpx;
					height: 120rpx;
					border-radius: 20rpx;
					font-size: 32rpx
				}
			}
		}

		// 查看评论
		.reviews-pop {
			.reviews-main {

				>.container-box {
					padding-bottom: 140rpx;
					display: flex;
					flex-direction: column;
					height: 100%;
				}

				/deep/ .u-subsection {
					height: 68rpx !important;
					border-radius: 34rpx !important;

					.u-item-bg {
						height: 56rpx !important;
						border-radius: 28rpx !important;
						box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1) !important;
					}
				}
			}

			.reviews-list-box {
				flex: auto;
				height: 0;
				overflow: auto;
				padding-top: 26rpx;

				.reviews-card {
					margin: 30rpx 0;

					&:not(:last-child) {
						/deep/ .main {
							border-bottom: 2rpx solid #F2F3F5;
						}
					}
				}
			}
		}

		.change-order-address {
			.popup-main {
				padding: 56rpx 40rpx;

				.header {
					padding: 0 10rpx;
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;

					>text {
						color: #212121;
						font-weight: 500;
					}
				}

				.check-address {
					margin-top: 80rpx;

					.address-item {
						display: flex;
						margin-bottom: 68rpx;

						.check-text {
							width: 0;
							flex: auto;
							color: #1E2432;

							.user-name {
								font-size: 30rpx;
								line-height: 36rpx;
								font-weight: 500;
							}

							.address {
								margin-top: 6rpx;
								font-size: 26rpx;
								line-height: 40rpx;
							}

						}

						.check-icon {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							border: 4rpx solid #212121;
							margin-right: 28rpx;
							margin-top: 8rpx;
							position: relative;

							&.is-checked::after {
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								width: 70%;
								height: 70%;
								border-radius: 50%;
								background-color: #212121;
							}
						}
					}
				}
			}
		}

		.tabs {

			height: 68rpx;
			background: rgba(0, 0, 0, 0.0287);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			opacity: 1;
			width: 539rpx;
			display: flex;
			align-items: center;
			margin: 58rpx auto 0;
			padding: 0 8rpx;

			.tabs_aside {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #A5A5A5;
				transition: transform .4s;

			}

			.active {
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: #3B2BE4;
			}
		}

		.reviews-main-popup {
			padding: 20rpx;

			.reviews-card {
				margin: 30rpx 0;

				&:not(:last-child) {
					/deep/ .main {
						border-bottom: 2rpx solid #F2F3F5;
					}
				}
			}
		}
	}

	.customerServiceBox {
		height: 100%;
		padding: 40rpx;
		flex-wrap: wrap;
		color: #fff;
		background: #1b1d29;

		.iconBox {
			width: 120rpx;
			height: 120rpx;
			margin: 20rpx auto;
			/* text-align: center; */
			/* line-height: 100px; */
			display: flex;
			justify-content: center;
			align-items: center;
			background: #2979ff;
			border-radius: 50%;
		}
	}
	.box-border {
		// padding: 40rpx;
		border-radius: 8px;
		background: rgba(242, 242, 242, 1);
		border-radius: 26rpx;
		margin-bottom: 48rpx;
	
		.row {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;
	
			.rowTitle {
				color: rgba(23, 23, 23, 1);
				font-family: PingFang SC;
				font-weight: 500;
				margin-right: 8rpx;
				font-size: 28rpx;
				width: 150rpx;
			}
	
			.progress {
				width: 140rpx;
				height: 24rpx;
				border-radius: 32rpx;
				margin: 0 16rpx;
				background: rgba(230, 230, 230, 1);
	
				.progress-bar {
					height: 24rpx;
					border-radius: 32rpx;
					background: linear-gradient(90deg, rgba(198, 233, 77, 1) 0%, rgba(239, 218, 73, 1) 26.22%, rgba(240, 156, 58, 1) 57.06%, rgba(240, 156, 58, 1) 98.71%, rgba(235, 115, 48, 1) 98.71%);
				}
			}
	
			.rowRange {
				font-weight: 500;
				font-size: 28rpx;
				margin-right: 8rpx;
				color: rgba(253, 161, 22, 1);
			}
	
			.rowMes {
				color: rgba(253, 161, 22, 1);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
			}
		}
	
		.range {
			color: rgba(95, 100, 140, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
		}
	
		.tips {
			color: rgba(182, 182, 182, 1);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 10px;
			padding: 0 0 40rpx;
			margin: 20rpx 0 40rpx;
			border-bottom: 1px solid rgba(182, 182, 182, 1);
		}
	
	}
</style>